<template>
  <div class="home">
    <div class="kv pos">
      <img alt src="@/assets/kv_bg.jpg" />
    </div>
    <div class="TestDrive pos">
      <img src="@/assets/TestDrive_bg.jpg" alt />
      <div class="TestDrive_info">
        <img src="@/assets/TestDrive_info.png" alt />
        <input
          type="text"
          class="name"
          maxlength="20"
          placeholder="姓名"
          v-model="name"
        />
        <input
          type="tel"
          maxlength="11"
          placeholder="手机"
          class="phone"
          v-model="phone"
        />
        <div class="pro">
          <select id="pro" v-model="proIndex" @change="proChange">
            <option v-for="(item, index) in proArr" :key="index"
              >{{ item }}
            </option>
          </select>
          <span class="pro_text">{{ proIndex }}</span>
        </div>
        <div class="city">
          <select id="city" v-model="cityIndex" @change="cityChange">
            <option v-for="(item, index) in cityArr" :key="index"
              >{{ item }}
            </option>
          </select>
          <span class="city_text">{{ cityIndex }}</span>
        </div>
        <div class="dealer">
          <select id="dealer" v-model="dealerIndex">
            <option v-for="(item, index) in dealerArr" :key="index"
              >{{ item }}
            </option>
          </select>
          <span class="dealer_text">{{ dealerIndex }}</span>
        </div>
      </div>
      <!--条款勾选-->
      <div class="check" @click="onCheck">
        <img src="@/assets/drive_no.png" alt />
        <div class="check_zz" v-bind:class="{ yes: isChenk, no: !isChenk }">
          <img src="@/assets/drive_yes.png" alt />
        </div>
      </div>
      <!--隐私条款-->
      <div class="TestDrive_statement" @click="onPopupShow">
        <img src="@/assets/TestDrive_statement.png" alt />
      </div>
      <div class="drive_button" @click="onVerify">
        <img alt src="@/assets/drive_button.png" />
      </div>
    </div>
    <div class="BrightSpot pos">
      <img src="@/assets/BrightSpot_bg.jpg" alt />
      <div class="BrightSpot_title">
        <img src="@/assets/BrightSpot_title.png" alt />
      </div>
      <swiper :options="swiperOption" class="swiper1">
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img01.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img02.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img03.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img04.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img05.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img06.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img07.png" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/BrightSpot_img08.png" />
        </swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-pagination swiper_dots" slot="pagination"></div>
      </swiper>
    </div>
    <div class="fine pos">
      <img src="@/assets/fine_bg.jpg" alt />
      <div class="fine_title">
        <img src="@/assets/fine_title.png" alt />
      </div>
      <swiper :options="swiperOptions" class="swiper2">
        <swiper-slide>
          <img alt src="@/assets/fine_img01.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img02.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img03.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img04.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img05.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img06.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img07.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img08.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img09.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img10.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img11.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img alt src="@/assets/fine_img12.jpg" />
        </swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-pagination swiper_dots2" slot="pagination"></div>
      </swiper>
    </div>
    <div class="policy pos">
      <img src="@/assets/policy_bg.jpg" alt />
    </div>
    <pop-up v-model="isPopupShow">
    </pop-up>
  </div>
</template>
<script>
import popUp from "../components/pop-up.vue";

export default {
  name: "Home",
  components: {
    popUp
  },
  data() {
    return {
      name: "",
      phone: "",
      proArr: [], //省份数组
      proText: "请选择省份", //省份初始化文字
      proIndex: "请选择省份", //省份双向绑定
      cityArr: [], //城市数组
      cityText: "请选择城市", //城市初始化文字
      cityIndex: "请选择城市", //城市双向绑定
      dealerArr: [], //城市数组
      dealerText: "请选择经销商", //城市初始化文字
      dealerIndex: "请选择经销商", //城市双向绑定
      isChenk: false,
      isPopupShow: false,  //政策开关
      where: {
        吉林: { 长春市: ["长春大昌合众汽车销售服务有限公司"] },
        北京: {
          北京市: [
            "北京中进众旺汽车销售服务有限公司",
            "北京骏宝捷汽车销售服务有限公司",
            "大众汽车服务中心（北京）有限公司",
            "北京华日菱汽车贸易有限公司"
          ]
        },
        山东: {
          青岛市: [
            "青岛百得利汽车销售有限公司",
            "青岛德辉汽车销售服务有限公司"
          ],
          济南市: ["济南德辉汽车销售服务有限公司"],
          临沂市: ["临沂万华汽车销售服务有限公司"],
          潍坊市: ["潍坊百得利贸易有限公司"],
          烟台市: ["烟台德辉汽车销售服务有限公司"],
          淄博市: ["淄博润之坤汽车销售有限公司"]
        },
        天津: {
          天津市: [
            "天津空港众辉汽车销售有限公司",
            "天津市中顺联众汽车服务有限公司"
          ]
        },
        辽宁: {
          沈阳市: [
            "辽宁川达汽车销售服务有限公司",
            "沈阳大昌合众汽车销售服务有限公司"
          ],
          大连市: ["大连大昌合众汽车销售服务有限公司"]
        },
        山西: {
          太原市: ["山西华日菱汽车贸易有限公司", "山西华菱丰汽车贸易有限公司"],
          大同市: ["大同市华菱丰汽车贸易有限公司"],
          长治市: ["长治市华菱丰汽车贸易有限公司"]
        },
        河北: {
          唐山市: [
            "唐山庞大兴锐汽车销售服务有限公司",
            "唐山众腾汽车销售有限公司"
          ],
          石家庄市: ["河北华菱丰汽车贸易有限公司", "河北华日菱汽车贸易有限公司"]
        },
        内蒙: {
          鄂尔多斯市: ["鄂尔多斯市德众鑫汽车销售有限责任公司"],
          包头市: [
            "包头众锐汽车销售服务有限公司",
            "包头市华日菱汽车贸易有限公司"
          ],
          呼和浩特市: ["内蒙古华菱丰汽车贸易有限公司"]
        },
        黑龙江: { 哈尔滨市: ["哈尔滨大昌合众汽车销售服务有限公司"] },
        江苏: {
          南通市: ["南通德立汽车销售服务有限公司"],
          南京市: ["南京交家电车辆有限公司", "南京景众汽车销售服务有限公司"],
          常州市: ["常州德立汽车销售服务有限公司"],
          江阴市: ["上海中进众旺汽车销售服务有限公司江阴分公司"],
          镇江市: ["镇江德立汽车销售服务有限公司"],
          扬州市: ["扬州新丰泰汽车有限责任公司"],
          无锡市: [
            "无锡金阊众翔汽车销售服务有限公司",
            "无锡新丰泰汽车有限责任公司",
            "无锡腾众汽车销售服务有限公司"
          ],
          泰州市: ["泰州天恒达汽车贸易有限公司"],
          苏州市: [
            "苏州市金阊众翔汽车销售服务有限公司",
            "苏州新丰泰汽车销售服务有限公司"
          ]
        },
        上海: {
          上海市: [
            "科乐通汽车销售服务（上海）有限公司",
            "上海中进众旺汽车销售服务有限公司",
            "上海腾众汽车销售服务有限公司"
          ]
        },
        安徽: {
          合肥市: ["安徽风之星汽车股份有限公司"],
          阜阳市: ["阜阳市瑞嘉汽车销售服务有限公司"]
        },
        浙江: {
          义乌市: ["义乌恒众汽车销售服务有限公司"],
          温州市: ["温州之远汽车有限公司"],
          台州市: ["台州德业汽车有限公司"],
          宁波市: ["宁波众通汽车有限公司"],
          嘉兴市: ["嘉兴禾众睿德汽车销售服务有限公司"],
          湖州市: ["湖州禾众誉德汽车销售服务有限公司"],
          杭州市: ["浙江元通捷通汽车有限公司", "浙江捷通汽车有限公司"]
        },
        广西: {
          南宁市: ["广西弘德腾锐汽车销售服务有限公司"],
          柳州市: ["柳州正腾贸易发展有限公司"]
        },
        湖北: {
          武汉市: ["湖北德宸汽车销售服务有限公司", "湖北尚腾汽车贸易有限公司"]
        },
        福建: {
          厦门市: ["厦门盈众润宇汽车销售有限公司", "厦门众骋汽车有限公司"],
          泉州市: ["泉州众骋汽车有限公司", "泉州盈众润宇汽车销售有限公司"],
          福州市: ["福建盈众润达汽车销售有限公司"]
        },
        湖南: {
          长沙市: [
            "湖南德熙进口汽车销售服务有限公司",
            "湖南德顺汽车贸易有限公司"
          ]
        },
        广东: {
          珠海市: ["珠海市华熙汽车销售服务有限公司"],
          深圳市: [
            "深圳市鹏城华熙汽车销售服务有限公司",
            "深圳市德鹏进口汽车销售有限公司",
            "深圳市华熙汽车销售服务有限公司",
            "深圳市华熙汽车销售服务有限公司福田分公司"
          ],
          汕头市: ["汕头市众驰汽车有限公司"],
          惠州市: ["惠州市德意进口汽车销售服务有限公司"],
          广州市: [
            "广州鸿粤鸿众汽车销售服务有限公司",
            "广东乘用汽车销售有限公司"
          ],
          佛山市: ["佛山正通众锐汽车销售服务有限公司"],
          东莞市: [
            "东莞市宝瑞汽车销售服务有限公司",
            "东莞市华熙汽车销售有限公司"
          ]
        },
        海南: { 海口市: ["海南华众汽车销售服务有限公司"] },
        江西: { 南昌市: ["江西广甸汽车销售服务有限公司"] },
        云南: {
          昆明市: [
            "云南新双立汽车销售服务有限责任公司",
            "云南德众汽车销售服务有限公司"
          ]
        },
        四川: {
          绵阳市: ["绵阳新双立汽车销售服务有限责任公司"],
          成都市: [
            "四川新双立汽车销售服务有限责任公司",
            "成都新进程汽车销售服务有限责任公司",
            "成都新鸿众汽车销售服务有限责任公司"
          ]
        },
        贵州: { 贵阳市: ["贵州新双立汽车销售服务有限责任公司"] },
        宁夏: { 银川市: ["宁夏和众进口汽车销售服务有限公司"] },
        青海: { 西宁市: ["青海嘉信汽车销售服务有限公司"] },
        甘肃: { 兰州市: ["兰州金河康汽车销售服务有限公司"] },
        新疆: {
          乌鲁木齐市: [
            "新疆天汇华鑫汽车销售服务有限公司",
            "新疆腾众汽车销售服务有限公司"
          ]
        },
        重庆: {
          重庆市: [
            "重庆博众辉锐汽车销售有限公司",
            "重庆百事达华轩汽车销售服务有限公司"
          ]
        },
        陕西: {
          西安市: [
            "陕西新丰泰汽车技术开发有限责任公司",
            "陕西馨海德宇汽车销售服务有限公司"
          ],
          榆林市: ["榆林德泰汽车销售服务有限公司"]
        },
        河南: {
          郑州市: ["河南中豫汽车贸易有限公司", "河南国际汽车贸易有限公司"],
          商丘市: ["商丘中豫汽车贸易有限公司"],
          洛阳市: ["洛阳中豫汽车贸易有限公司"]
        }
      },
      swiperOption: {
        pagination: {
          el: ".swiper_dots",
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true
      },
      swiperOptions: {
        pagination: {
          el: ".swiper_dots2",
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true
      }
    };
  },
  created() {
    this.proInit();
    this.cityArr = ["请选择城市"];
    this.dealerArr = ["请选择经销商"];
  },
  mounted() {},
  methods: {
    //省份数组方法
    proInit() {
      this.proArr.push(this.proText);
      for (var k in this.where) {
        this.proArr.push(k);
      }
      // console.log(this.proArr);
    },
    // change省份 方法
    proChange() {
      this.cityArr = [];
      this.cityIndex = "请选择城市";
      this.dealerArr = [];
      this.dealerIndex = "请选择经销商";
      this.dealerArr = ["请选择经销商"];
      this.cityArr.push(this.cityText);
      for (var k in this.where[this.proIndex]) {
        this.cityArr.push(k);
      }
       console.log(this.cityArr);
    },
    // change城市 方法
    cityChange() {
      this.dealerArr = [];
      this.dealerIndex = "请选择经销商";
      this.dealerArr.push(this.dealerText);
      var a = this.where[this.proIndex][this.cityIndex]; //因为是数组
      for (var k in a) {
        this.dealerArr.push(a[k]);
      }
      console.log(this.dealerArr);
    },
    // 试驾提交验证
    onVerify() {
      // 正则
      var validName = /^([a-zA-Z]{1,20}|[\u4e00-\u9fa5]{1,10}|[\u4e00-\u9fa5a-zA-Z]{1,20})$/;
      var validPhone = /^(((17[0-9]{1})|(13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(16[6]{1})|(19[89]{1}))+\d{8})$/;
      // 姓名
      var nameVal = this.name;
      var namePattern = validName.test(nameVal);
      if (!nameVal) {
        alert("请输入您的姓名");
        return false;
      }
      if (namePattern) {
        if (nameVal == "姓名") {
          alert("请输入您的姓名");
          return false;
        }
      } else {
        alert("请输入正确的姓名");
        return false;
      }
      //	手机
      var phoneVal = this.phone;
      var phonePattern = validPhone.test(phoneVal);
      if (phoneVal) {
        if (phonePattern) {
          // return false;
        } else {
          alert("请填写正确的手机号码");
          return false;
        }
      } else {
        alert("请填写您的手机号码");
        return false;
      }
      //	省份
      var proVal = this.proIndex;
      if (!proVal || proVal == "请选择省份") {
        alert("请选择省份");
        return false;
      }
      //	城市
      var cityVal = this.cityIndex;
      if (!cityVal || cityVal == "请选择城市") {
        alert("请选择城市");
        return false;
      }
      //	经销商
      var dealerVal = this.dealerIndex;
      if (!dealerVal || dealerVal == "请选择经销商") {
        alert("请选择经销商");
        return false;
      }
      // 勾选框
      if (this.isChenk === false) {
        alert("请勾选我已阅读并接受隐私说明。");
        return false;
      }
      alert("提交成功");
      var data = {
        name: nameVal, //姓
        phone: phoneVal, //手机
        pro: proVal, //省份
        city: cityVal, //城市
        dealer: dealerVal //经销商
      };
      console.log(data);
      this.name = "";
      this.phone = "";
      this.proIndex = "请选择省份";
      this.cityIndex = "请选择城市";
      this.dealerIndex = "请选择经销商";
      this.cityArr = ["请选择城市"];
      this.dealerArr = ["请选择经销商"];
      this.isChenk = false;
    },
    onCheck() {
      this.isChenk = !this.isChenk;
    },
    onPopupShow() {
      this.isPopupShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  max-width: 750px;
  .pos {
    width: 7.5rem;
    position: relative;
  }
  .TestDrive {
    .TestDrive_info {
      position: absolute;
      left: 0.46rem;
      top: 0;
      width: 6.7rem;
      .name {
        position: absolute;
        left: 0;
        top: 0rem;
        width: 6.7rem;
        height: 0.74rem;
        font-size: 0.25rem;
        line-height: 0.74rem;
        text-indent: 0.1rem;
        color: #000;
        background: transparent;
      }
      .phone {
        position: absolute;
        left: 0;
        top: 1.08rem;
        width: 6.7rem;
        height: 0.74rem;
        font-size: 0.25rem;
        line-height: 0.74rem;
        text-indent: 0.1rem;
        color: #000;
        background: transparent;
      }
      .pro {
        position: absolute;
        left: 0;
        top: 2.16rem;
        width: 3.24rem;
        height: 0.74rem;
        select {
          width: 100%;
          height: 0.74rem;
          text-indent: 0.05rem;
          font-size: 0.18rem;
          z-index: 10;
          color: #2c2c2c;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        }
        span {
          position: absolute;
          width: 3.24rem;
          height: 100%;
          line-height: 0.74rem;
          color: #2c2c2c;
          font-size: 0.25rem;
          z-index: 2;
          left: 0.15rem;
          top: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .city {
        position: absolute;
        left: 3.46rem;
        top: 2.16rem;
        width: 3.24rem;
        height: 0.74rem;
        select {
          width: 100%;
          height: 0.74rem;
          text-indent: 0.05rem;
          font-size: 0.18rem;
          z-index: 10;
          color: #2c2c2c;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        }
        span {
          position: absolute;
          width: 3.24rem;
          height: 100%;
          line-height: 0.74rem;
          color: #2c2c2c;
          font-size: 0.25rem;
          z-index: 2;
          left: 0.15rem;
          top: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .dealer {
        position: absolute;
        left: 0;
        top: 3.24rem;
        width: 6.7rem;
        height: 0.74rem;
        select {
          width: 100%;
          height: 0.74rem;
          text-indent: 0.05rem;
          font-size: 0.18rem;
          z-index: 10;
          color: #2c2c2c;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        }
        span {
          position: absolute;
          width: 6.3rem;
          height: 100%;
          line-height: 0.74rem;
          color: #2c2c2c;
          font-size: 0.25rem;
          z-index: 2;
          left: 0.15rem;
          top: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .check {
      width: 0.24rem;
      height: 0.24rem;
      position: absolute;
      left: 2.2rem;
      top: 5.8rem;
      cursor: pointer;
    }
    .check_zz {
      position: absolute;
      top: 0;
      left: 0;
      width: 0.24rem;
      height: 0.24rem;
    }
    .yes {
      display: block;
    }
    .no {
      display: none;
    }
    .TestDrive_statement {
      position: absolute;
      left: 2.6rem;
      top: 5.8rem;
      width: 2.66rem;
    }
    .drive_button {
      position: absolute;
      left: 0.8rem;
      top: 4.6rem;
      width: 6.08rem;
    }
  }
  .BrightSpot {
    width: 7.5rem;
    height: 13.12rem;
    .BrightSpot_title {
      position: absolute;
      left: 1.39rem;
      top: 0;
      width: 4.67rem;
    }
    .swiper1 {
      position: absolute;
      left: 0;
      top: 1.76rem;
      width: 7.5rem;
      height: auto;
      overflow: visible;
    }
  }
  .fine {
    .fine_title {
      position: absolute;
      left: 1.28rem;
      top: 0;
      width: 4.96rem;
    }
    .swiper2 {
      position: absolute;
      left: 0.3rem;
      top: 1.68rem;
      width: 6.9rem;
      height: auto;
      // overflow-y: visible;
    }
  }
}
</style>
<style>
.swiper_dots {
  text-align: center;
  top: 9.3rem;
  position: absolute;
  z-index: 12;
  height: 0.23rem;
  width: 7.5rem;
  z-index: 9999;
}
.swiper_dots .swiper-pagination-bullet {
  width: 0.23rem;
  height: 0.23rem;
  display: inline-block;
  background-color: #717171;
  opacity: 1;
  margin: 0 0.1rem 0 0;
  border-radius: 50%;
}
.swiper_dots .swiper-pagination-bullet-active {
  width: 0.23rem;
  height: 0.23rem;
  opacity: 1;
  background-color: #fff;
  border-radius: 50%;
}
.swiper_dots2 {
  text-align: center;
  top: 3.4rem;
  position: absolute;
  z-index: 12;
  height: 0.23rem;
  width: 7.5rem;
  z-index: 9999;
}
.swiper_dots2 .swiper-pagination-bullet {
  width: 0.23rem;
  height: 0.23rem;
  display: inline-block;
  background-color: #717171;
  opacity: 1;
  margin: 0 0.1rem 0 0;
  border-radius: 50%;
}
.swiper_dots2 .swiper-pagination-bullet-active {
  width: 0.23rem;
  height: 0.23rem;
  opacity: 1;
  background-color: #fff;
  border-radius: 50%;
}
</style>